<template>
  <div class="title">物种详细介绍</div>
  <el-row>
    <el-col :span="10" :offset="1" style="border:1px solid blue">
      <el-image
        style="width: 100px; height: 100px"
        :src=biologyDetail.cover></el-image>
    </el-col>
    <el-col :span="10" :offset="1">
      <div>
        <span>动物名称:{{biologyDetail.name}}</span>
        <el-divider></el-divider>
        <span>拉丁文名:{{biologyDetail.enName}}</span>
        <el-divider></el-divider>
        <span>门属:{{biologyDetail.phylum}}</span>
        <el-divider></el-divider>
        <span>类属:{{biologyDetail.class}}</span>
        <el-divider></el-divider>
        <span>属种:{{biologyDetail.genus}}</span>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" :offset="1">
      <div class="title_y">物种简介:</div>
      <div>
        {{biologyDetail.brief}}
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" :offset="1">
      <div class="title_y">物种DNA:</div>
      <div>
        {{biologyDetail.dnaCode}}
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { Paging, Search } from '@/utils/paging'
import server from '@/utils/server'
import type { biology_detail } from '@/types/biology'

const route = useRoute()
const router = useRouter()
const id = Number.parseInt(route.query.id as string)



const query = ref<biology_detail>({
  brief: '',
  class: '',
  cover: '',
  dnaCode: '',
  enName: '',
  genus: '',
  name: '',
  phylum: '',
  id:id
})


onMounted(async() => {
  console.log('调用前')
  biologyDetail.value = await server.get('/api/biology/detail', {
    params: query.value
  })
  console.log(biologyDetail)
})

const biologyDetail = ref<Paging<biology_detail>>({
  list: [], // 数据列表
  next: 0
})
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.title{
  margin-top: 1%;
  margin-left: 2%;
  margin-bottom: 1%;
}

.title_y{
  margin-top: 1%;
  margin-bottom: 1%;
}
</style>

